例題４ if文

code:ex04.js

/*

壁にぶつかると反転する円

*/

let x1, vx1, y1, vy1, r1=30;// 変数の宣言、半径を30

function setup() {

createCanvas(600, 400);

colorMode(RGB,255,255,255,1);

// 円の中心

x1 = r1; // 左の壁にくっつけた

y1 = height/2;

// 円の速度（１フレームで進むピクセル数）　

vx1 = 2;//x成分と

vy1 = 0.2;//y成分

}

function draw() {

x1 += vx1;

y1 += vy1;

// 壁に当たったら速度ベクトルが反転する

if ( x1+r1 >= width ){

// 右端に到達

vx1 = -vx1;

x1 = width - r1; // xを壁の右端に強制的に置く

} else if ( x1 - r1 <= 0) {

// 左端に到達

vx1 = -vx1;

x1 = r1;

}

// ｙ方向も壁に当たったら跳ね返るようにしてください。

if ( y1+r1 >= height ){

// 床に到達

vy1 = -vy1;

y1 = height - r1; // 床に接してに強制的に置く

} else if ( y1 - r1 <= 0) {

// 天井に到達

vy1 = -vy1;

y1 = r1; // 天井に接して強制的に置く

}

background(220);

circle(x1,y1,r1*2); // 円を描くときに、半径を２倍して直径にする

}

制御構造の代表的なものとして、条件分岐と繰り返しがあります。

構文

if (条件式) {

// 条件式が true のとき実行し、次の実行文へ進む

} else if (条件式1) {

// 上部の条件式が false かつ 条件式１が true のとき実行し、次の実行文に進む

} else {

// 上部の条件式がすべて false のとき実行する

}

// 次の実行文

else if ブロックや else ブロックは省略可能

例題４では、if ( x1 + r1 >= width ) ブロックは右の壁をボールが当たったとき、vx 速度の方向を反転、つまり-vxにする。さらに、x1 = width - r1 はボールを壁にピタッとつける。else if ( x1 - r1 <= 0 ) ブロックは左の壁に当たったとき、x方向の速度を反転し、ボールの位置を 　x1 = r1 に設定する。

例題4に追加　

同様に上下の壁に当たったときに、vy速度を反転させ、ボールを壁につけるように変更しなさい。